<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/jquery.sorted.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>
    <script src="/layer/layer.js"></script>
    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
</head>
<body>
<form id="myForm" action="index.html" method="post" class="definewidth m20" >
    <input type="hidden" name="roleId" value=""/>
<table class="table table-bordered table-hover definewidth m10">
    <tr>
        <td width="10%" class="tableleft">角色名称</td>
        <td><input type="text" name="roleName" value=""/></td>
    </tr>
    <tr>
        <td class="tableleft">状态</td>
        <td>
            <input type="radio" id="valid" name="roleState" value="0" checked /> 启用
            <input type="radio" id="invalid"  name="roleState" value="1"  /> 禁用
        </td>
    </tr>
    <tr>
        <td class="tableleft">权限</td>
        <td id="menuList">

		</td>
    </tr>
    <tr>
        <td class="tableleft"></td>
        <td>
            <button type="button" id="btnUpdate" class="btn btn-primary" >更新</button> &nbsp;&nbsp;
            <button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button>
        </td>
    </tr>
</table>
</form>
</body>
</html>
<script>
    $(function () {
        getMenuList();
        $(':checkbox[name="group[]"]').click(function () {
            $(':checkbox', $(this).closest('li')).prop('checked', this.checked);
        });
        let url = document.location.toString();//获取URL
        let roleId=url.GetValue("roleId");
        let pageNum=url.GetValue("pageNum");
        let pageSize=url.GetValue("pageSize");
        queryById(roleId);
        $("#btnUpdate").click(function () {
            // alert($("#myForm").serialize());
            let roleName = $("input[name='roleName']").val();
            let flag=$("input[name='group[]").is(":checked");
            if(validate(roleName)){
                if(flag){
                    updateRole(pageNum,pageSize);
                }else {
                    layer.msg("请选择权限！");
                }
            }
        });
        $("#backid").click(function () {
            window.location.href = "index.html?pageNum="+pageNum+"&pageSize="+pageSize;
        });
    });
    function updateRole(pageNum,pageSize) {
        //alert( $("#myForm").serialize());
        $.ajax({
            type: "POST",//这里必须写POST.在后台会转成put类型的请求
            url: "/role/",
            data: $("#myForm").serialize()+"&_method=PUT",
            dataType:"json",
            success: function(vo){
                if(vo.code==200) {
                    //layer.msg("更新成功！");
                    window.location.href = "index.html?pageNum="+pageNum+"&pageSize="+pageSize;
                }else{
                    layer.msg(vo.msg);
                }
            }
        });
    }
    function queryById(roleId) {
        $.ajax({
            type: "GET",
            url: "/role/" + roleId,
            data: "",
            dataType: "json",
            success: function (vo) {
                //alert( "Data Saved: " + vo );
                let obj = vo.obj;
                let roleId = obj.roleId;
                let roleName = obj.roleName;
                let roleState = obj.roleState;
                let menuList = obj.menuList;
                $("input[name='roleId']").val(roleId);
                $("input[name='roleName']").val(roleName);
                if(roleState==1){
                    $("input[id='invalid']").attr("checked",true);
                }else {
                    $("input[id='valid']").attr("checked",true);
                }
                if(menuList!=null){
                    for (let i = 0; i < menuList.length; i++) {
                       let menuId=menuList[i].menuId;
                        $("input[id='menu"+menuId+"']").prop('checked',true);
                    }
                }
            }
        });
    }


    function getMenuList() {
        $.ajax({
            type: "GET",
            url: "/role/menuList",
            data: "",
            dataType: "json",
            success: function (vo) {
                let menuList=vo.list;
                let str = "";
                for (let i=menuList.length-1; i >=0;i--) {
                    let obj=menuList[i];
                    str+="<ul><label class='checkbox inline'><input type='checkbox' id='menu"+obj.menuId+"' name='group[]' value='"+obj.menuId+"' />"+obj.menuName+"</label></ul> ";
                }
                $("#menuList").html(str);
            }
        });
    }
    String.prototype.GetValue = function (para) {
        let reg = new RegExp("(^|&)" + para + "=([^&]*)(&|$)");
        let r = this.substr(this.indexOf("\?") + 1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
    function validate(roleName) {
        if (roleName == null || roleName.length == 0) {
            layer.msg("角色名称不能为空");
            return false;
        }
        return true;
    }
</script>